<template>
  <div class="home">
    <div>
      <el-row>
        <el-col :span="3"
          ><el-input
            v-model="ruleform.nickname"
            placeholder="请输入用户昵称"
          ></el-input
        ></el-col>
        <el-col :span="3">
          <el-input
            v-model="ruleform.consignee"
            placeholder="请输入收货人名称"
          ></el-input
        ></el-col>
        <el-col :span="3"
          ><el-input
            v-model="ruleform.orderSn"
            placeholder="请输入订单编号"
          ></el-input
        ></el-col>
        <el-col :span="7">
          <el-date-picker
            v-model="value"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker
        ></el-col>
        <el-col :span="4">
          <el-select
            v-model="ruleform.orderStatusArray"
            multiple
            placeholder="请选择"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.name"
              :value="item.orderStatusArray"
            />
          </el-select>
        </el-col>
        <el-col :span="4"
          ><el-button type="primary" @click="onSubmit">查找</el-button>
          <el-button type="primary" @click="downLoad">导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-row v-for="(item, index) in props.row.goodsVoList" :key="index">
              <el-col :span="3">
                <img :src="item.picUrl" alt="" width="50" height="50" />
              </el-col>
              <el-col :span="6">
                <div>商品名称：{{ item.goodsName }}</div>
              </el-col>
              <el-col :span="3">
                <div>
                  规格：<span
                    v-for="(item1, index1) in item.specifications"
                    :key="index1"
                    >{{ item1 }}</span
                  >
                </div>
              </el-col>
              <el-col :span="4">
                <div>单价：{{ item.price }}元</div>
              </el-col>
              <el-col :span="4">
                <div>数量：{{ item.number }}件</div>
              </el-col>
              <el-col :span="4">
                <div>小计{{ item.price * item.number }}元</div>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" prop="orderSn" width="120">
        </el-table-column>
        <el-table-column label="用户头像" width="80">
          <div
            style="
              width: 50px;
              height: 50px;
              border-radius: 50%;
              background-color: #c0c4cc;
            "
          ></div>
        </el-table-column>
        <el-table-column label="下单用户" prop="userName" width="80">
        </el-table-column>
        <el-table-column label="下单时间" prop="addTime" width="100">
        </el-table-column>
        <el-table-column label="订单状态" prop="orderStatus" width="80">
          <template slot-scope="scope">
            <el-tag>{{ getLevel(scope.row.orderStatus) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单金额" prop="orderPrice" width="80">
        </el-table-column>
        <el-table-column label="实付金额" prop="actualPrice" width="80">
        </el-table-column>
        <el-table-column label="支付时间" prop="payTime" width="80">
        </el-table-column>
        <el-table-column label="收货人" prop="consignee" width="80">
        </el-table-column>
        <el-table-column label="收货电话" prop="mobile" width="100">
        </el-table-column>
        <el-table-column label="物流单号" prop="shipSn" width="80">
        </el-table-column>
        <el-table-column label="物流渠道" prop="shipChannel" width="80">
        </el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="czxx(scope.row)"
              style="padding: 7px 4px; width: 40px"
              >详细</el-button
            ><el-button
              type="danger"
              @click="czsc(scope.row)"
              style="padding: 7px 4px; width: 40px"
              >删除</el-button
            ><el-button
              type="warning"
              @click="czsk(scope.row)"
              style="padding: 7px 4px; width: 40px"
              >收款</el-button
            ><el-button
              type="primary"
              @click="czfh(scope.row)"
              style="padding: 7px 4px; width: 40px"
              >发货</el-button
            ><el-button
              type="danger"
              @click="cztk(scope.row)"
              style="padding: 7px 4px; width: 40px"
              >退款</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="订单详情" :visible.sync="dialogFormVisible1">
      <el-form :model="form">
        <div id="main">
          <div>
            <h4>订单编号</h4>
            <span style="margin-left: 20px">{{ ordermsg.orderSn }}</span>
          </div>
          <div>
            <h4>订单状态</h4>
            <el-tag
              v-if="ordermsg.orderStatus == 102"
              style="margin-left: 20px"
              type="primary"
              disable-transitions
              >用户取消</el-tag
            >
            <el-tag
              v-if="ordermsg.orderStatus == 301"
              style="margin-left: 20px"
              type="primary"
              disable-transitions
              >已发货</el-tag
            >
            <el-tag
              v-if="ordermsg.orderStatus == 103"
              style="margin-left: 20px"
              type="primary"
              disable-transitions
              >系统取消</el-tag
            >
            <el-tag
              v-if="ordermsg.orderStatus == 201"
              style="margin-left: 20px"
              type="primary"
              disable-transitions
              >已付款</el-tag
            >
            <el-tag
              v-if="ordermsg.orderStatus == 202"
              style="margin-left: 20px"
              type="primary"
              disable-transitions
              >申请退款</el-tag
            >
          </div>
          <div>
            <h4>订单用户</h4>
            <span style="margin-left: 20px">{{ user.nickname }}</span>
          </div>
          <div>
            <h4>用户留言</h4>
            <span style="margin-left: 20px">{{ "" }}</span>
          </div>
          <div>
            <h4>收货信息</h4>
            <span style="margin-left: 20px"
              >(收货人)&nbsp;&nbsp;&nbsp;&nbsp; {{ ordermsg.consignee }}&nbsp;
              (手机号) &nbsp;{{ ordermsg.mobile }} &nbsp; (地址)&nbsp;
              {{ ordermsg.address }}</span
            >
          </div>
          <span style="margin-top: 20px; height: 100%">
            <h4 flex="12">商品信息</h4>
            <el-table :data="orderGoods" border>
              <el-table-column
                property="goodsName"
                label="商品名称"
                align="center"
              />
              <el-table-column
                property="goodsSn"
                label="商品编号"
                align="center"
              />
              <el-table-column
                property="specifications[0]"
                label="货品规格"
                align="center"
              />
              <el-table-column
                property="price"
                label="货品价格"
                align="center"
              />
              <el-table-column
                property="number"
                label="货品数量"
                align="center"
              />
              <el-table-column
                property="picUrl"
                label="货品图片"
                align="center"
              >
                <template slot-scope="props">
                  <div class="grid-content bg-purple">
                    <img
                      :src="props.row.picUrl"
                      alt=""
                      style="width: 40px; vertical-align: middle"
                    />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </span>

          <div style="margin-top: 18px">
            <h4>费用信息</h4>
            <span style="margin-left: 20px"
              >&nbsp;(实际费用)&nbsp;{{ ordermsg.actualPrice }}元 =
              &nbsp;(商品总价)&nbsp;{{ ordermsg.orderPrice }}元 +
              &nbsp;(快递费用)&nbsp;{{ ordermsg.aftersaleStatus }} 元-
              &nbsp;(优惠减免)&nbsp;{{
                ordermsg.couponPrice
              }}元-&nbsp;(积分减免)&nbsp;{{ ordermsg.aftersaleStatus }}元</span
            >
          </div>
          <div>
            <h4>支付信息</h4>
            <span style="margin-left: 20px"
              >(支付渠道) &nbsp;微信支付 &nbsp;(支付时间) &nbsp;{{
                ordermsg.payTime
              }}</span
            >
          </div>
          <div>
            <h4>快递信息</h4>
            <span style="margin-left: 20px"
              >(快递公司)&nbsp;
              {{ ordermsg.shipChannel }} &nbsp;(快递单号)&nbsp;
              {{ ordermsg.shipSn }} &nbsp;(发货时间)&nbsp;
              {{ ordermsg.payTime }} &nbsp;</span
            >
          </div>
          <div>
            <h4>退款信息</h4>
            <span style="margin-left: 20px"
              >(退款金额)&nbsp; 元 &nbsp;(退款类型) &nbsp;&nbsp;(退款备注)
              &nbsp; ;&nbsp;(退款时间)</span
            >
          </div>
          <div>
            <h4>收货信息</h4>
            <span style="margin-left: 20px">(确认收货时间)</span>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" v-print="clickDome">打 印</el-button>
      </div>
    </el-dialog>
    <!-- /////////////////////////////////////////////////////////////////////////////////// -->
    <el-dialog title="订单收款" center :visible.sync="dialogFormVisible2">
      <span>确认当前订单（订单编号 20250225265609 ) 已经完成线下收款 ？</span>
      <el-form :model="form">
        <el-form-item label="订单金额" :label-width="formLabelWidth">
          <el-input
            v-model="form.orderPrice"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="实付金额" :label-width="formLabelWidth">
          <el-input v-model="form.actualPrice" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-table :data="form.goodsVoList" style="width: 100%">
            <el-table-column prop="goodsName" label="商品"> </el-table-column>
            <el-table-column prop="specifications" label="规格">
              <span v-for="(item, index) in form.specifications" :key="index">
                {{ item }}</span
              >
            </el-table-column>
            <el-table-column prop="number" label="下单数量"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="shoukuan">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
    <el-dialog title="发货" :visible.sync="dialogFormVisible3">
      <el-form :model="form">
        <el-form-item label="快递公司" :label-width="formLabelWidth">
          <el-select
            v-model="form.shipChannel"
            placeholder="请选择"
            class="filter-item"
          >
            <el-option
              v-for="(item, index) in kdgs"
              :key="index"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="快递编号" :label-width="formLabelWidth">
          <el-input v-model="form.shipSn" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="fahuo">确 定</el-button>
      </div>
    </el-dialog>

    <!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
    <el-dialog title="退款" :visible.sync="dialogFormVisible4">
      <el-form :model="form">
        <el-form-item label="退款金额" :label-width="formLabelWidth">
          <el-input
            v-model="form.actualPrice"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="tuikuan">确 定</el-button>
      </div>
    </el-dialog>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleform.page"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="ruleform.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  ddglbl,
  ddglps,
  ddglfh,
  ddglsk,
  ddglxx,
  ddglsc,
  ddgltk,
} from "@/api/shangchangguanli/ddgl";
export default {
  data() {
    return {
      form: {},
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      dialogFormVisible4: false,
      formLabelWidth: "120px",
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      kdgs: [],
      tableData: [],
      ruleform: {
        page: 1,
        limit: 20,
        nickname: "",
        consignee: "",
        orderSn: "",
        timeArray: "",
        timeArray: "",
        sort: "add_time",
        order: "desc",
        start: "",
        orderStatusArray: [],
        end: "",
      },
      value1: [],
      // 订单状态
      options: [
        {
          orderStatusArray: 101,
          name: "未付款",
        },
        {
          orderStatusArray: 102,
          name: "用户取消",
        },
        {
          orderStatusArray: 103,
          name: "系统取消",
        },
        {
          orderStatusArray: 201,
          name: "已付款",
        },
        {
          orderStatusArray: 202,
          name: "申请退款",
        },
        {
          orderStatusArray: 203,
          name: "已退款",
        },
        {
          orderStatusArray: 301,
          name: "已发货",
        },
        {
          orderStatusArray: 401,
          name: "用户收货",
        },
        {
          orderStatusArray: 402,
          name: "系统收货",
        },
      ],
      value: "",
      props: { multiple: true },
      ordermsg: {},
      orderGoods: [],
      user: {},
      // 打印
      clickDome: {
        // 打印的范围
        id: "#main",
        // 设置了打印标题  默认understand
        // popTitle: "litemall",
      },
    };
  },
  methods: {
    // 订单详情
    czxx(row) {
      this.dialogFormVisible1 = true;
      ddglxx({
        id: row.id,
      }).then((response) => {
        this.ordermsg = response.data.order;
        this.orderGoods = response.data.orderGoods;
        this.user = response.data.user;
      });
    },

    // 退款1
    cztk(row) {
      this.dialogFormVisible4 = true;
      this.form = row;
    },
    // 发货1
    czfh(row) {
      this.dialogFormVisible3 = true;
      this.form = row;
    },
    // 收款1
    czsk(row) {
      console.log(row);
      this.dialogFormVisible2 = true;
      this.form = row;
    },
    // 删除
    czsc(row) {
      ddglsc({
        orderId: row.id,
      }).then(() => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        });
      });
    },
    // 收款
    shoukuan() {
      ddglsk({
        goodsList: this.form.goodsVoList,
        newMoney: this.form.actualPrice,
        oldMoney: Number(this.form.orderPrice),
        orderId: this.form.id,
        orderSn: this.form.orderSn,
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible2 = false;
      });
    },

    // 发货
    fahuo() {
      ddglfh({
        orderId: this.form.id,
        shipChannel: this.form.shipChannel,
        shipSn: this.form.shipSn,
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible3 = false;
      });
    },
    // 退款
    tuikuan() {
      ddgltk({
        orderId: this.form.id,
        refundMoney: this.form.actualPrice,
      }).then((res) => {
        console.log(res);
        this.dialogFormVisible4 = false;
      });
    },
    // 查找
    onSubmit() {
      //      this.listQuery.timeArray = this.day;
      //  if (this.listQuery.timeArray.length !== 0) {
      //   this.listQuery.start = this.handleTime2(this.day[0]);
      //   this.listQuery.end = this.handleTime2(this.day[1]);
      //  }
      //  this.listQuery.orderStatusArray = Array.from(this.value1);
      //  this.listQuery.page = 1;

      this.ruleform.start = this.value[0];
      this.ruleform.end = this.value[1];
      // this.ruleform.orderStatusArray = this.ruleform.orderStatusArray;

      ddglbl({
        ...this.ruleform,
        orderStatusArray: this.ruleform.orderStatusArray.join(","), // 例如：转成 "1,2,3"
      }).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });

      // ddglbl({
      //   ...this.ruleform,
      //   orderStatusArray: this.orderStatusArray.map((item) => {
      //     console.log(item);
      //     return item;
      //   }),
      // }).then((res) => {
      //   console.log(res);
      //   this.tableData = res.data.list;
      //   this.total = res.data.total;
      // });
    },
    // 导出
    downLoad() {
      console.log("导出");
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ruleform.limit = val;
      this.ddglbl();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.ruleform.page = val;
      this.ddglbl();
    },
    // 标签
    getLevel(orderStatus) {
      console.log(orderStatus);
      if (orderStatus == "101") {
        return "未付款";
      } else if (orderStatus == "102") {
        return "用户取消";
      } else if (orderStatus == "103") {
        return "系统取消";
      } else if (orderStatus == "201") {
        return "已付款";
      } else if (orderStatus == "202") {
        return "申请退款";
      } else if (orderStatus == "203") {
        return "已退款";
      } else if (orderStatus == "301") {
        return "已发货";
      } else if (orderStatus == "401") {
        return "用户收货";
      } else {
        return "系统收货";
      }
    },
    ddglbl() {
      ddglbl(this.ruleform).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    ddglps() {
      ddglps().then((res) => {
        console.log(res);
        this.kdgs = res.data;
      });
    },
  },
  mounted() {
    this.ddglbl();
    this.ddglps();
  },
};
</script>

<style lang="scss" scoped>
.home::v-deep {
  padding: 20px;
  font-size: 12px !important;
  .el-row {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 20px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>